<template>
  <el-dialog
    title="用户查看"
    :visible.sync="visible"
    width="40%"
    top="13vh"
    :before-close="closeHandle"
    :close-on-click-modal="false">
    <el-form label-width="85px">
      <el-form-item label="所属部门">
        <span :style="{ color: themeColor }">{{ user.deptName }}</span>
      </el-form-item>
      <el-form-item label="用户名称">
        <el-input v-model="user.username" readonly></el-input>
      </el-form-item>
      <el-form-item label="登录别名">
        <el-input v-model="user.loginName" readonly></el-input>
      </el-form-item>
      <el-form-item label="用户手机">
        <el-input v-model="user.phone" readonly></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱">
        <el-input v-model="user.email" readonly></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-input :value="user.status === 0 ? '可用' : '风控'" readonly></el-input>
      </el-form-item>
      <el-form-item label="关联角色">
        <template v-for="roleName in user.roleList">
          <el-tag class="role-tag">{{ roleName }}</el-tag>
        </template>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeHandle">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "user-view",
    data() {
      return {
        // 弹出框显示状态[true-显示 false-隐藏]
        visible: false,
        // 用户对象
        user: {
          // 部门名称
          deptName: undefined,
          // 用户名字
          username: undefined,
          // 用户手机号
          phone: undefined,
          // 用户邮箱号
          email: undefined,
          // 用户登录别名
          loginName: undefined,
          // 用户状态[0-可用 1-不可用]
          status: undefined,
          // 创建时间
          createTime: undefined,
          // 创建用户
          createUser: undefined,
          // 用户关联角色数据
          roleList: []
        },
      }
    },
    computed: {
      // 主题颜色
      themeColor() {
        return this.$store.state.settings.theme
      },
    },
    methods: {
      /**
       * 初始化用户弹出框方法
       * @param {string} userId 用户主键
       */
      initUserViewDialog(userId) {
        this.visible = true;

        this.getUser(userId)
      },
      /**
       * 获取用户数据方法
       * @param {string} userId 用户主键
       */
      getUser(userId) {
        this.$axios.$get('/sys/user/view', { params: { userId }})
          .then(({ data }) => {
            let _user = this.user
            for (let propKey in _user) {
              if (data.hasOwnProperty(propKey)) {
                _user[propKey] = data[propKey];
              }
            }
          })
          .catch(() => {})
      },
      /**
       * 关闭用户查看弹出框事件
       */
      closeHandle() {
        // 关闭弹出框
        this.visible = false;
        let _user = this.user
        for (let userKey in _user) {
          _user[userKey] = undefined
        }
        // 手动清空用户关联角色数据
        this.user.roleList = []
      },
    },
  }
</script>

<!--
  css字符对应
-->
<style>
  .role-tag {
    margin-right: 7px;
  }
</style>
